#{extends 'CRUD/layout.html' /}
#{set title:messages.get('crud.show.title', type.modelName) /}

<div id="crudShow" class="${type.name}">

    <h2 id="crudShowTitle">&{'crud.show.title', type.modelName}</h2>

    <div class="objectForm">
    #{form action:@save(object._key()), enctype:'multipart/form-data'}
        #{crud.form}
            #{crud.custom 'tags'}
            <label for="tags">
                &{'tags'}
            </label>
                <script type ="text/javascript">
                    var toggle = function(tagEl) {
                        var input = document.getElementById('h'+tagEl.id);
                        if(tagEl.className.indexOf('selected') > -1) {
                            tagEl.className = 'tag';
                            input.value = '';
                        } else {
                            tagEl.className = 'tag selected':
                            input.value = tagEl.id;
                        }
                        
                    }
                    
                </script>
                <div class ="tags-list">
                    #{list items:models.Tag.findAll(), as: 'tag'}
                    <span id ="${tag.id}" onclick="toggle(this)"
                        class ="tag ${object.tags.contains(tag) ? 'selected' : ''}">
                              ${tag}
                    </span>
                    <input id="h${tag.id}" type="hidden" name="${fieldName}"
                           value="${object.tags.contains(tag) ? tag.id: ''}"/>
                    #{/list}
                </div>
            #{/crud.custom}
        #{/crud.form}
    #{/form}
    </div>

    #{form @delete(object._key())}
        <p class="crudDelete">
            <input type="submit" value="&{'crud.delete', type.modelName}" />
        </p>
    #{/form}

</div>